<template>
 <div class="search-list" v-show="searches.length">
    <transition-group name="list" tag="ul">
      <li :key="item" class="search-item" @click="selectItem(item)" v-for="item in searches">
        <span class="text">{{item}}</span>
        <span class="icon" @click.stop="deleteOne(item)">
          <i class="icon-delete"></i>
        </span>
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'searchlist',
	props: {
		searches: {
			type: Array,
			default:function(){
				return []
			}
		}
	},
	methods: {
		selectItem(item) {//点击事件
			this.$emit('select', item)
		},
		deleteOne(item) {//删除事件
			this.$emit('delete', item)
		}
	}
	
}
</script>

<style lang="scss" scoped >
.search-list{
	.search-item{
		display: flex;
		align-items: center;
		height: 40px;
		overflow: hidden;
		&.list-enter-active, &.list-leave-active{
			transition: all 0.1s;
		}
		&.list-enter, &.list-leave-to{
			height: 0;
		}
		.text{
			flex: 1;
			color: $color-text-l;
			}
		.icon{
			@include extend-click();
			.icon-delete{
				font-size: $font-size-small;
				color: $color-text-d;
			}
		}	
	}
	
}
</style>